<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?38667cbc1dc499c2b72f75f5e1bb383a";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <title>高校成绩查询</title>
    <style>
        .content {
            width: 1000px;
            margin: 0 auto;
            margin-top: 20px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .btn-group {
            margin-left: 20px;
        }

        .top {
            margin-bottom: 20px;
        }

        td,
        th {
            text-align: center;
            vertical-align: middle;
        }

        @media (max-width: 600px) {
            .content {
                width: auto;
                margin-top: 0;
            }

            .fl {
                float: none
            }

            .fr {
                float: none;
            }

            .form-inline {
                width: 100%;
            }

            #search {
                width: 100%;
            }

            .btn-group {
                margin-left: 0;
                width: 100%;
            }

            .btn-group>* {
                width: 33.333%;
            }

            #show-text {
                text-align: center;
            }

            .top>* {
                margin: 5px 0;
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="top clearfix">
            <div id="show-text" class="fr">当前显示的是2018年的信息</div>
            <div class="form-inline fl">
                <select id="type" class="form-control">
                    <option value="1" selected>按学校名查询</option>
                    <option value="0">按成绩查询</option>
                </select>
                <input id="search-text" type="text" class="form-control" placeholder="请输入您要查找的学校">
                <button id="search" class="btn">查询</button>
            </div>
            <div class="btn-group fl" role="group">
                <!-- <button class="btn btn-info score">全部</button> -->
                <button class="btn btn-success score">2016</button>
                <button class="btn btn-danger score">2017</button>
                <button class="btn btn-primary score">2018</button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th style="min-width: 100px">
                            <select id="subject" class="form-control">
                                <option value="2" disabled selected>科类</option>
                                <option value="3">全部</option>
                                <option value="1">文史</option>
                                <option value="0">理工</option>
                            </select>
                        </th>
                        <th>院校代号</th>
                        <th>院校名称</th>
                        <th style="min-width: 140px">
                            <select id="scores" class="form-control">
                                <option value="2" disabled selected>投档线</option>
                                <option value="1">升序</option>
                                <option value="0">降序</option>
                            </select>
                        </th>
                        <th>最低排名</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>